<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">BlockUI</h1>
        <div class="entry">
            <p>BlockUI blocks other JSF Components. It can be used with special ajax integration or manually with client side api.</p>

            <h:form>
                
                <p:growl id="growl" />
                
                <h3>Basic BlockUI</h3>
                <p:panel id="pnl" header="New User" style="margin-bottom:10px;">
                    <p:messages id="messages" />
                    <h:panelGrid columns="3">
                        <h:outputLabel for="firstname" value="Firstname: *" />
                        <p:inputText id="firstname" value="#{pprBean.firstname}" required="true" label="Firstname">
                            <f:validateLength minimum="2" />
                        </p:inputText>
                        <p:message for="firstname" />

                        <h:outputLabel for="surname" value="Surname: *" />
                        <p:inputText id="surname" value="#{pprBean.surname}" required="true" label="Surname"/>
                        <p:message for="surname" />
                    </h:panelGrid>
                    
                    <p:commandButton id="saveBtn" value="Save" icon="ui-icon-check" style="margin:0" actionListener="#{pprBean.savePerson}" update="growl"/>
                </p:panel>
                                
                <p:blockUI block="pnl" trigger="saveBtn" />
                
                <h3>Advanced BlockUI</h3>
                <p:dataTable id="dataTable" var="car" value="#{tableBean.cars}"
                             paginator="true" rows="10">
                    <f:facet name="header">
                        Ajax Pagination
                    </f:facet>
                    
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Model" />
                        </f:facet>
                        <h:outputText value="#{car.model}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Year" />
                        </f:facet>
                        <h:outputText value="#{car.year}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Manufacturer" />
                        </f:facet>
                        <h:outputText value="#{car.manufacturer}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Color" />
                        </f:facet>
                        <h:outputText value="#{car.color}" />
                    </p:column>
                </p:dataTable>
                
                <p:blockUI block="dataTable" trigger="dataTable">
                    LOADING<br />
                    <p:graphicImage value="/images/ajax-loader.gif"/>
                </p:blockUI>

                <h3>Client Side API</h3>
                <p:tree value="#{treeBean.root}" var="node" id="tree">
					<p:treeNode id="treeNode">
						<h:outputText value="#{node}" id="lblNode"/>
					</p:treeNode>
				</p:tree>

                <br /> 
                
                <p:commandButton id="pnlBtn" value="Block Panel" type="button" onclick="bui.show()"/>
                <p:commandButton id="pnlBtn2" value="Unblock Panel" type="button" onclick="bui.hide()"/>
                
                <p:blockUI block="tree" widgetVar="bui"/>
                
            </h:form>
            
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="blockUI.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
                
    &lt;p:growl id="growl" /&gt;

    &lt;h3&gt;Basic BlockUI&lt;/h3&gt;
    &lt;p:panel id="pnl" header="New User" style="margin-bottom:10px;"&gt;
        &lt;p:messages id="messages" /&gt;
        &lt;h:panelGrid columns="3"&gt;
            &lt;h:outputLabel for="firstname" value="Firstname: *" /&gt;
            &lt;p:inputText id="firstname" value="\#{pprBean.firstname}" required="true" label="Firstname"&gt;
                &lt;f:validateLength minimum="2" /&gt;
            &lt;/p:inputText&gt;
            &lt;p:message for="firstname" /&gt;

            &lt;h:outputLabel for="surname" value="Surname: *" /&gt;
            &lt;p:inputText id="surname" value="\#{pprBean.surname}" required="true" label="Surname"/&gt;
            &lt;p:message for="surname" /&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:commandButton id="saveBtn" value="Save" icon="ui-icon-check" 
                    style="margin:0" actionListener="\#{pprBean.savePerson}" update="growl"/&gt;
    &lt;/p:panel&gt;

    &lt;p:blockUI block="pnl" trigger="saveBtn" /&gt;

    &lt;h3&gt;Advanced BlockUI&lt;/h3&gt;
    &lt;p:dataTable id="dataTable" var="car" value="\#{tableBean.cars}"
                    paginator="true" rows="10"&gt;
        &lt;f:facet name="header"&gt;
            Ajax Pagination
        &lt;/f:facet&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Model" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{car.model}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Year" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{car.year}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Manufacturer" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{car.manufacturer}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Color" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{car.color}" /&gt;
        &lt;/p:column&gt;
    &lt;/p:dataTable&gt;

    &lt;p:blockUI block="dataTable" trigger="dataTable"&gt;
        LOADING&lt;br /&gt;
        &lt;p:graphicImage value="/images/ajax-loader.gif"/&gt;
    &lt;/p:blockUI&gt;

    &lt;h3&gt;Client Side API&lt;/h3&gt;
    &lt;p:tree value="\#{treeBean.root}" var="node" id="tree"&gt;
        &lt;p:treeNode id="treeNode"&gt;
            &lt;h:outputText value="\#{node}" id="lblNode"/&gt;
        &lt;/p:treeNode&gt;
    &lt;/p:tree&gt;

    &lt;p:commandButton id="pnlBtn" value="Block Panel" type="button" onclick="bui.show()"/&gt;
    &lt;p:commandButton id="pnlBtn2" value="Unblock Panel" type="button" onclick="bui.hide()"/&gt;

    &lt;p:blockUI block="tree" widgetVar="bui"/&gt;

&lt;/h:form&gt;
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
